<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card v-loading="loading">
        <tree-tools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <el-tree :data="departs" :props="defaultProps">
          <!-- <el-row slot-scope="{ data }" type="flex" align="middle" style="height: 40px; width: 100%"> -->
          <!-- <template v-slot:default="{ data }"> -->
          <!-- v-slot: 等价于 # -->
          <template #default="{ data }">
            <tree-tools :tree-node="data" @delDepts="getDepartments" @addDepts="addDepts" @editDepts="editDepts" />
          </template>
        </el-tree>
      </el-card>
      <!-- 新增部门的弹框 -->
      <!-- !#1 传递 node（当前行数据）到新增组件 -->
      <!-- 目的是为了根据当前的 node.id 找孩子进行校验；后续添加部门的时候也需要用到 -->
      <!-- //!自定义事件处的 $event 永远永远是子组件内进行 $emit 的的时候的第二个参数 -->
      <!-- <add-dept :show-dialog="showDialog" :tree-node="node" @addDepts="getDepartments" @changeDialog="showDialog = $event" /> -->
      <!-- <add-dept :show-dialog="showDialog" :tree-node="node" @addDepts="getDepartments" @update:showDialog="showDialog = $event" /> -->
      <!-- !和上面等价 -->
      <!-- :show-dialog="showDialog" + @update:showDialog="showDialog = $event" -->
      <!-- 等价于 -->
      <!-- :show-dialog.sync="showDialog" -->
      <!-- .sync 简洁一些，父亲少了事件监听和赋值的操作 -->
      <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
import { arrayToTree } from 'performant-array-to-tree'
import AddDept from './components/add-dept.vue'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      defaultProps: {
        label: 'name'
      },
      departs: [],
      loading: false,
      showDialog: false,
      node: null
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      this.loading = true
      const departs = await getDepartments()
      this.company.name = departs.companyName
      // !mark
      this.departs = arrayToTree(departs.depts, {
        id: 'id',
        parentId: 'pid',
        dataField: null
      })
      this.loading = false
    },
    addDepts(node) {
      this.showDialog = true
      // 记录一下 node，当前点击的这一样的数据，目的是为了后续添加的时候要用到
      this.node = node
    },
    changeDialog(bar) {
      this.showDialog = bar
    },
    /* async editDepts(node) {
      // 先获取数据完毕后再弹框，为了防止数据闪动和 bug
      await this.$refs.addDept.getDepartDetail(node.id)
      // 显示弹框
      this.showDialog = true
      // 记录当前点击这一行的数据，目的是为了根据 id 获取详情
      this.node = node
    } */
    editDepts(node) {
      // 显示弹框
      this.showDialog = true
      // 记录当前点击这一行的数据，目的是为了根据 id 获取详情
      this.node = node
      this.$refs.addDept.getDepartDetail(node.id)
    }
  }
}
</script>

<style scoped lang="scss">
    .el-tree {
        ::v-deep {

            // 有子节点 且未展开 +
            .el-tree-node__expand-icon.el-icon-caret-right:before {
                background: url('~@/assets/common/add-circle.png') no-repeat 0 0;
                content: '';
                display: block;
                width: 16px;
                height: 16px;
                font-size: 16px;
                background-size: 16px;
            }

            // 有子节点 且已展开 -
            .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
                background: url('~@/assets/common/minus-circle.png') no-repeat 0 0;
                content: '';
                display: block;
                width: 16px;
                height: 16px;
                font-size: 16px;
                background-size: 16px;
            }

            // 小三角的样式, 去掉默认的小三角的旋转效果
            .el-tree-node__expand-icon.expanded {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            // 没有子节点
            .el-tree-node__expand-icon.is-leaf::before {
                background: url('~@/assets/common/user-filling.png') no-repeat 0 0;
                content: '';
                display: block;
                width: 16px;
                height: 16px;
                font-size: 16px;
                background-size: 16px;
            }
        }
    }
</style>
